<template>
    <div>
        <div class="weekend-title">
            Weekend travel
        </div>
        <ul v-for="item in weekendList" :key="item.id">
            <li class="item">
                <div class="item-img-wrapper">
                    <img :src="item.imgUrl" alt="#">
                </div>
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "HomeWeekend",
    props:['weekendList'],
}
</script>

<style lang="scss" scoped>
$color_1: rgba(204, 204, 204, .9);

.weekend-title {
    margin-top: .2rem;
    line-height: 0.8rem;
    text-indent: .2rem;
    font-size: 0.4rem;
}

.item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(204, 204, 204, .3);

    .item-img-wrapper {
        width: 100%;
        height: 100%;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .item-info {
        flex: 1;
        margin: .3rem 0rem .3rem .2rem;

        .item-title {
            font-size: 0.4rem;
            font-weight: bold;
            line-height: 0.6rem;
        }

        .item-desc {
            font-size: 0.4rem;
            color: $color_1;
        }
    }
}
</style>